<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>

  <div id="app">
    <button @click="num++">+</button>
    <q-header :a="num" title="小敏"></q-header>

    <hr>
    <button @click="n++">+</button>
    <q-header :a="n" title="小敏"></q-header>

  </div>
</body>
<script>
  const { createApp, ref, computed } = Vue;

  const app = createApp({
    setup() {
      let num = ref('0')
      let n = ref(0)
      return {
        num,
        n
      }
    }
  })
  // component 组件
  app.component('q-header', {

    props: {
      a: [Number, String],
      title: String
    },
    setup(props) {
      let title = props.title;
      let a = computed(function () {
        return props.a
      })
      return {
        title,
        a
      }
    },
    template: `<div class="header">
      {{a}}
      {{title}}</div>`
  })


  app.mount('#app')
</script>

</html>